import { ReqHospitalschedule, ReqParameters, getDoctor } from '@/api/hospitalList/HospitalList';
import { DoctorList, getdepartmentValue, getdepartmentValueList, scheduleList } from '@/api/hospitalList/model/hospitalListType';
import { Button, Card, Col, Pagination, Row, Table, Tag, Tree } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function Hospitalscheduling() {
 let navigate =    useNavigate()
    let { hoscode } = useParams()
    // 存储科室状态
    let [parameters, setparameters] = useState<getdepartmentValueList>([])
    // 存储第一层分类
    let [firstType, setfirstType] = useState<string[]>([])
    //存储排班日期
    let [schedule, setschedule] = useState<scheduleList>([])
    // 存储医生信息
    let [doctor,setDoctor] = useState<DoctorList>([])
    // 表格数据
    const columns: ColumnsType<any> = [
        {
            align:"center",
            title: '序号',
            render(key, value, index) {
                return index + 1
            }
        },
        {
            align:"center",
            title: '职称',
            dataIndex: 'title',
        },
        {
            align:"center",
            title: '号源时间',
            dataIndex: 'workDate',
        },
        {
            align:"center",
            title: '总预约数',
            dataIndex: 'reservedNumber',
        },
        {
            align:"center",
            title: '剩余预约数',
            dataIndex: 'availableNumber',
        },
        {
            align:"center",
            title: '挂号费(元)',
            dataIndex: 'amount',
        },
        {
            align:"center",
            title: '擅长技能',
            dataIndex: 'skill',
        }
    ];
    //   初始化获取科室列表数据
    let getParameters = async () => {
        let res = await ReqParameters(hoscode as string)
        let aa = res.map((Iteam) => {
            return Iteam.depcode
        })
        let dep = (res[0].children as getdepartmentValue[])[0].depcode

        let newres = res.map((Iteam) => {
            Iteam.disabled = true
            return Iteam
        })
        setfirstType(aa)
        setparameters(newres)
        let value = await ReqHospitalschedule({
            page: 1,
            limit: 5,
            hoscode: hoscode as string,
            depcode: dep
        })  
        setschedule(value.bookingScheduleList)
     let firstData =    value.bookingScheduleList[0].workDate
        // 获取医生信息
     let doctorValue =   await  getDoctor({hoscode:hoscode as string,depcode:dep,workDate:firstData})

     setDoctor(doctorValue)
    }
    //
    // 模拟生命周期
    useEffect(() => {
        getParameters()
    }, [])
    return (
        <Card>
            {/* 面包屑导航 */}
            <p>选择：XXXX/XXXX/XXXX</p>
            {/* 内容区 */}
            <Row gutter={30}>
                {/* 内容区左侧 */}
                <Col span={5}>
                    <div style={{ border: "1px solid #ccc", overflow: "auto", height: "400px" }} >
                        <Tree

                            // defaultExpandedKeys={firstType}
                            // defaultSelectedKeys={['0-0-0', '0-0-1']}
                            // defaultCheckedKeys={['0-0-0', '0-0-1']}
                            treeData={parameters as []}
                            fieldNames={{ title: "depname", key: "depcode" }}
                            expandedKeys={firstType}
                        />
                    </div>

                </Col>
                {/* 内容右侧 */}
                <Col span={19}>

                    <div>
                        {
                            schedule.map((Iteam) => {
                              return  <Tag key={Iteam.dayOfWeek} color="green">
                                    <div>{Iteam.dayOfWeek} {Iteam.workDate}</div>
                                    <div>{Iteam.availableNumber} / {Iteam.reservedNumber}</div>
                                </Tag>
                            })
                        }
                    </div>
                    <Pagination className='mt' defaultCurrent={6} total={500} />
                    {/* 表格 */}
                    <Table
                    rowKey="id"
                    pagination={false}
                     className='mt' columns={columns}  dataSource={doctor}
                     />
                     <Button onClick={()=>{
                        navigate(-1)
                     }}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
